<script >
import { mapState, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState({
      tags: state => state.tab.tabsList
    })
  },
  methods: {
    ...mapMutations(['closeTag']),
    // tags 点击跳转
    changeMenu(item) {
      this.$router.push({
        name: item.name
      })
    },
    // tags 点击删除
    handleClose(item, index) {
      // 删除指定数据
      this.closeTag(item)
      const length = this.tags.length
      // 删除之后的跳转逻辑
      // 如果删除非激活的tag，则高亮显示和跳转不需要任何变化
      if(item.name !== this.$route.name) {
        return
      }
      // 如果删除的是最后一个，则向前跳转
      if(index === length) {
        this.$router.push({
          name: this.tags[index - 1].name
        })
      }else{
      //   如果删除的是当前的，则向后跳转
        this.$router.push({
          name: this.tags[index].name
        })
      }
    }
  }

}
</script>

<template>
<div class="tag-container">
  <el-tag
      v-for="(item, index) in tags"
      :key="item.path"
      :closable="item.name !== 'home'"
      :effect="$route.name === item.name ? 'dark' : 'plain'"
      @click="changeMenu(item)"
      @close="handleClose(item, index)"
      size="small"
  >
    {{ item.label }}
  </el-tag>
</div>
</template>

<style scoped lang="less">
.tag-container {
  padding: 20px;
  .el-tag {
    margin-right: 15px;
    cursor: pointer;
  }

}
</style>